<template>
  <span>
    <el-link
      slot="reference"
      :underline="false"
      style="color: #337ab7; text-decoration: underline"
      @click="tableAddClick"
      >{{ cldZzdh }}</el-link
    >
    <el-dialog
      title="BOM领用明细"
      v-model="open"
      :close-on-click-modal="false"
      draggable
      width="1050px"
      append-to-body
    >
      <el-table border stripe :data="listProductBom" :cell-style="styleRow">
        <el-table-column label="#" type="index" align="center" />
        <el-table-column
          label="销售单号"
          align="center"
          prop="modSodh"
          width="120"
        />
        <!--    <el-table-column label="父项代码" align="center" prop="modFxdm" width="120" />
    <el-table-column label="父项品名规格" align="center" prop="modFxPmgg" />-->
        <el-table-column
          label="子项代码"
          align="center"
          prop="modWldm"
          width="120"
        />
        <el-table-column label="子项品名规格" align="center" prop="modZxPmgg" />
        <el-table-column
          label="采购属性"
          :show-overflow-tooltip="true"
          align="center"
          prop="modCgsx"
          width="80"
        >
          <template #default="scope">
            <dict-tag
              :options="$store.state.options.bomCgsxOptions"
              :value="scope.row.modCgsx"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="存放位置"
          width="90"
          align="center"
          prop="modCwdm"
        >
          <template #default="scope">
            <dict-tag
              :options="$store.state.options.allCwOptions"
              :value="scope.row.modCwdm"
            />
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center" prop="itmDw" width="80" />
        <el-table-column
          label="需求数量"
          align="center"
          prop="modXqsl"
          width="80"
        />
        <el-table-column
          label="领料数量"
          align="center"
          prop="modLlsl"
          width="80"
        />
        <el-table-column
          label="已领数量"
          align="center"
          prop="modYlsl"
          width="80"
        />
        <el-table-column
          label="可用库存"
          align="center"
          prop="kcmKykc"
          width="80"
        />
      </el-table>
    </el-dialog>
  </span>
</template>

<script>
import { getProductMod } from "@/api/output/picking";
import ModService from "@/api/output/modService";
export default {
  name: "PopProductBom",
  props: {
    cldZzdh: {
      type: String,
      default: "",
    },
    itmCkdm: {
      type: String,
      default: "",
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
    height: {
      type: [String, Number],
      default: "200",
    },
  },
  data() {
    return {
      loading: false,
      open: false,
      listProductBom: [],
    };
  },
  methods: {
    tableAddClick() {
      if (this.cldZzdh) {
        this.open = true;
        getProductMod(this.cldZzdh, "-").then((response) => {
          this.loading = true;
          this.listProductBom = response.data;
        });
      }
    },
    styleRow({ row }) {
      if (!(row.modLlsl > row.modYlsl))
        return {
          backgroundColor: "#69b05f",
        };
    },
    /** 不领操作，待领料数变为已领料数 */
    notReceiving(row) {
      if (row) {
        const modId = row.modId;
        if (modId != null) {
          this.$confirm(
            "确认要进行操作吗？该条目领料数将修改为已领数",
            "提示",
            {
              cancelButtonText: "取消",
              confirmButtonText: "确认",
              type: "info",
            }
          )
            .then(() => {
              return ModService.notReceiving(modId);
            })
            .then((res) => {
              this.$message.success(res.msg);
              this.tableAddClick();
            })
            .catch(() => {});
        } else {
          this.$message.error("未获取到该项id，请刷新页面重试");
        }
      }
    },
  },
};
</script>
<style module lang="scss"></style>
